<!-- 搜索框组件 -->
<script setup>
import { defineProps } from 'vue'

defineProps({
  data: {
    type: Object
  },
  postsNumber: {
    type: String
  },
  bossNumber: {
    type: String
  }
})
</script>

<template>
  <div class="companyCard">
    <div class="img">
      <img
        :src="data.companyProfilePicture"
        style="width: 60px; margin-top: 10px; margin-left: 25px"
      />
    </div>
    <div class="content">
      <div style="margin-top: 12px">
        <span class="name"
          >{{ data.name
          }}<el-icon
            style="vertical-align: middle; margin-left: 5px; color: #00b4b3"
            ><Cellphone /></el-icon
        ></span>
      </div>
      <div style="margin-top: 10px">
        <el-tag class="ml-2" type="info">{{
          data.goPublic === 0 ? '未上市' : '已上市'
        }}</el-tag>
        <el-tag class="ml-2" style="margin-left: 20px" type="info">{{
          data.numberPeople
        }}</el-tag>
        <el-tag style="margin-left: 20px" class="ml-2" type="info">{{
          data.categoryName
        }}</el-tag>
      </div>
    </div>
    <div
      style="position: absolute; right: 10px; display: flex; margin-top: 12px"
    >
      <div class="posts" style="margin-right: 10px; text-align: center">
        <div style="font-size: 18px; margin-bottom: 5px">{{ postsNumber }}</div>
        <div>在招职位</div>
      </div>
      <div class="posts" style="text-align: center">
        <div style="font-size: 18px; margin-bottom: 5px">{{ bossNumber }}</div>
        <div>位BOSS</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.companyCard {
  width: 780px;
  height: 80px;
  border-radius: 15px;
  background-color: #fff;
  display: flex;
  position: relative;
  .img {
    width: 100px;
  }
}
.content {
  font-size: 16px;
  margin-left: 20px;
  cursor: pointer;
  width: 350px;
}
.content:hover {
  .name {
    color: #00b4b3;
  }
}
.posts {
  cursor: pointer;
  border-radius: 7px;
  width: 100px;
  padding: 5px 0px;
}
.posts:hover {
  color: #00b4b3;
  background-color: rgba(#eee, $alpha: 0.5);
}
</style>
